<template>
	<view class="spell_name">
		<view class="top_img">
			<image :src="IMGLink + '/shopping/spellbg.png'" mode=""></image>
			<view class="rules" @click="toRule">
				拼团规则
			</view>
		</view>
		<view class="name_content">
			<view class="title">
				<view>
					序号
				</view>
				<view v-if='flag'>
					结果
				</view>
				<view>
					用户名
				</view>
				<view v-if='flag'>
					时间
				</view>
			</view>
			<view class="content">
				<view class="item" v-for="(i,j) in list" :key='i.id'>
					<view class="first">
						{{i.number}}
					</view>
					<view v-if='group_id && i.is_win==0'>
						<image :src="IMGLink+'/shopping/bagIcon.png'" class="bag_icon" mode=""></image>
						¥{{i.lose_red_package}}
					</view>
					<view v-if='group_id && i.is_win==1'>
						<image :src="IMGLink+'/shopping/kingIcon.png'" class="bag_icon" style="width: 34rpx;height: 22rpx;" mode=""></image>
					</view>
					<view>
						{{i.nickname}}
					</view>
					<view v-if='i.time'>
						{{i.time}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getGroupbuyList
	} from '../../../../api/shopping/shopping.js'
	export default {
		data() {
			return {
				IMGLink: this.IMGLink,
				list: [],
				group_id: null,
				id: null,
				flag:false
			}
		},
		onLoad(e) {
			this.id = decodeURIComponent(e.id) || null;
			this.group_id = e.group_id == 0 ? null : e.group_id;
			if (this.id) {
				this.getGroupbuyList();
			}
		},
		methods: {
			async getGroupbuyList() {
				const res = await getGroupbuyList({
					goods_id: this.id,
					group_id: this.group_id
				});
				if (res) {
					this.list = res.data;
					if(this.list[0]?.time){
						this.flag = true;
					}
				}
			},
			toRule() {
				uni.navigateTo({
					url: '/pages/shopping/commodity/rule/rule?type=7'
				});
			}
		}
	}
</script>
<style>
	page {
		min-height: 100%;
		background: rgba(239, 240, 241, 1);
	}
</style>
<style lang="scss" scoped>
	@import '../../common/css/color.scss';

	.spell_name {

		// min-height: 100%;	
		.bag_icon{
			width: 24rpx;
			height: 30rpx;
			display: inline-block;
			margin-right: 4rpx;
		}
		.top_img {
			width: 100%;
			height: 416rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}

			.rules {
				width: 134rpx;
				height: 48rpx;
				background: #FFF;
				border-radius: 100px 0 0 100px;
				position: absolute;
				top: 24rpx;
				right: 0;
				line-height: 48rpx;
				color: $color;
				font-size: 24rpx;
				text-align: center;
			}

		}

		.name_content {
			background: #fff;
			width: 620rpx;
			height: auto;
			padding: 40rpx;
			border-radius: 12px;
			margin: 0 auto;
			margin-top: -90rpx;
			position: relative;
			z-index: 99;

			.title {
				display: flex;
				justify-content: space-between;
				color: rgba(7, 7, 7, 1);
				font-size: 30rpx;
				line-height: 32rpx;

				view {
					flex: 1;
					text-align: center;
				}
			}

			.item {
				display: flex;
				justify-content: space-between;
				color: rgba(73, 73, 73, 1);
				margin-top: 40rpx;
				font-size: 26rpx;
				line-height: 28rpx;
				text-align: center;

				view {
					flex: 1;
					text-align: center;
				}

				.first {
					color: rgba(7, 7, 7, 1);
				}
			}
		}
	}
</style>
